<style src="@/css/components/table.css"></style>
<style src="@/css/components/button.css"></style>
<style src="@/css/components/popover.css"></style>
<style src="@/css/components/el-dialog.css"></style>
<style src="@/css/components/department-node.css"></style>
<style>
.base-set-box {
    background:#fff;
    padding:30px;
    flex:1;
    display: flex;
    flex-direction: column;
}
.test-papers-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

.pages {
    margin-top: 30px;
}

.head-tab-box{
    padding-bottom:20px;
    background: #fff;
    display: flex;
    justify-content:flex-end;
}
.head-tab-box p{color: #999;}
.head-tab-box p span{font-size: 18px;font-weight: bold;color: #333;margin-right: 10px;}
.head-tab-box >button {
    margin-right:30px;
}

.member-list-cont {
    display:flex;
}

.member-list-cont .member-list-child{
    width:302px;
    display:flex;
    flex: 302px 1 auto;
    background:#fff;
    padding:40px;
    box-sizing:border-box;
    margin-right:4px;
}
</style>
<template>
    <section>
        <div class="member-list-cont">
            <div class="member-list-child">
                <el-tree
                    class="new-department"
                    :props="propsName"
                    :data="departmentList"
                    node-key="DepartmentID"
                    highlight-current
                    ref="tree"
                    :filter-node-method="filterNode"
                    @node-click="getnode"
                    default-expand-all="true">
                </el-tree>
            </div>
            <div class="base-set-box">
                <div class="head-tab-box">
                    <el-input placeholder="请输入姓名/职务/部门" suffix-icon="el-icon-search" class="search" style="width:270px" v-model="searchContent" @keyup.native.enter="search"></el-input>
                </div>
                <div>
                    <el-table :data="list" style="width: 100%" class="newTab first-table">
                        <el-table-column prop="Username" label="姓名" min-width="20%"></el-table-column>
                        <el-table-column prop="Mobile" label="职务" min-width="20%"></el-table-column>
                        <el-table-column prop="Email" label="部门" min-width="20%"></el-table-column>
                        <el-table-column prop="EmployeeNo" label="同步时间" min-width="20%"></el-table-column>
                        <el-table-column label="操作" min-width="20%">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.Status" @change="stateFn(scope.row)"></el-switch>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pageModel class="pages newPage" :total="total" :page="page" @changePageSize="getPageSize" @changePage="getPage" v-if="total >= 10"></pageModel>
                </div>
            </div>
        </div>


        <!-- 弹窗区 -->
        <el-dialog
            title="提示"
            :visible.sync="deleteState"
            class="new-dialog"
            width="480px"
            :before-close="handleClose">
            <div class="cont">删除员工后，将不能继续使用学堂系统哦~</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="text no-border" @click="deleteState = false">取消</el-button>
                <el-button type="primary"  class="add" @click="delMember(selectIdAll.join(','))">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>

import pageModel from "components/pageModel.vue"

import qs from 'qs'

export default{
    data: function(){
        return {
            list:[],
            pageSize:10,
            total:0,
            page:1,
            path: [
                {
                    'name':'设置',
                    'path':'/organization/dept-list'
                },
                {
                    'name':'通讯录'
                }
            ],

            departmentList:[],
            searchContent:'',
            propsName: {
                label: 'DepartmentName',
                children: 'Child'
            }

        }
    },
    mixins: [mixinMethods],
    components:{
        pageModel
    },

    watch:{
        searchContent() {
            this.getList(this.DepartmentID)
        }
    },
    methods: {

        // 当前显示条数发生改变
        getPageSize(value) {
            this.pageSize = value
            this.getList()
        },

        // 当前分页改变
        getPage(value) {
            this.page = value
            this.getList()
        },

        stateFn(item) {
            this.changeStatus(item.EmployeeID)
        },

        deleteFn(){
            if( this.selectIdAll.length <= 0) {
                this.$message.error('请至少选择一个员工！')
                return false
            } else {
                this.deleteState = true
            }
        },

        async changeStatus(id) {
            let { data } = await axios.post('/com/employee/changeStatus', `employeeID=${id}`)

            data.flag !== 1 && this.$message.error(data.msg)
        },

        // 当前选择的部门 获取当前部门员工
        getnode(selectId){
            this.DepartmentID = selectId.DepartmentID
            this.getList(selectId.DepartmentID)
        },

        // 获取有部门员工列表
        getList(id){
            let param = !!id ? {'paginate':0, 'DepartmentID' : id, showAll:1, paginate:1, pagesize:this.pageSize, page:this.page, keywords:this.searchContent} : {'paginate':0, showAll:1, pagesize:this.pageSize, page:this.page, paginate:1, keywords:this.searchContent}

            axios.post('/com/employee/getEmployeeList', qs.stringify(param)).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.list = d.data.Row

                    this.list.forEach((value)=>{
                        value.Status = value.Status == 1 ? true : false
                    })

                    this.total= Number(d.data.Total)
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        // 获取部门数
        getDepartmentTree(firstFlag){
            this.getList();

            axios.post('/com/department/getDepartmentTree', qs.stringify({
            })).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.departmentList = d.data.Row;
                }else {
                    this.$message.error(d.msg)
                }
            });
        },
    },
    mounted(){
        this.$store.commit('setPath', this.path)
        // 获取部门数据
        this.getDepartmentTree(1);

    }
}


</script>
